<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.orderDate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="订单号" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.names }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.orderId }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="商品清单" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.names }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->

          <span style="margin-left: 10px" v-if="scope.row.status == 1"
            >已付款</span
          >
          <span style="margin-left: 10px" v-else-if="scope.row.status == 2"
            >已发货</span
          >
          <span style="margin-left: 10px" v-else-if="scope.row.status == 3"
            >已完成</span
          >
        </template>
      </el-table-column>

      <el-table-column label="金额" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <span style="margin-left: 10px">{{ scope.row.totalAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="设置订单状态">
        <template slot-scope="scope">
            <el-button
            size="mini"
            type="danger"
            v-if="scope.row.status == 2 || scope.row.status == 3"
            @click="sendOrder(scope.row.orderId, 1)"
            >已付款</el-button
          >

          <el-button
            size="mini"
            type="warning"
            v-if="scope.row.status == 1 || scope.row.status == 3"
            @click="sendOrder(scope.row.orderId, 2)"
            >已发货</el-button
          >
          <el-button
            size="mini"
            
            type="success"
            v-if="scope.row.status == 1 || scope.row.status == 2"
            @click="comOrder(scope.row.orderId, 3)"
            >已完成</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="sizes, prev, pager, next"
        :total="mytotal"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
import mytable from "@/api/table";

export default {
  data() {
    return {
      tableData: [],
      formInline: {
        username: "",
        admin: "",
      },
      mytotal: 50,
      limit: 5,
      currentPage2: 1,
    };
  },
  created() {
    console.log("created===========");
    this.getListByPage(1, this.limit);

    // this.gettableData()
  },
  methods: {
    getListByPage(current, limit) {
      // 页码  条数
      mytable.getOrderByPage(current, limit).then((res) => {
        console.log(res);
        this.tableData = res.data.records;
        console.log("=========");
        console.log(this.tableData);
        this.mytotal = res.data.total;
      });
    },
    //========================
    sendOrder(id, str) {
      mytable.setOrderStatus(id, str).then((res) => {
        this.$router.go(0)
      });
    },
    comOrder(id, str) {
      mytable.setOrderStatus(id, str).then((res) => {
        this.$router.go(0)
      });
    },
    //=========================

    // 分页查询
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.getListByPage(1, val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage2 = val;
      this.getListByPage(val, this.limit);
    },
  },
};
</script>
  
  <style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
  